import { Layout, Menu } from 'antd';
import React from 'react';
import { mainrouter } from '../router/Router_config';
import {NavLink,Outlet} from "react-router-dom"
import { setIcon } from '../gloab';

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => (
  <Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
    >
      <div className="logo" />
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['4']}
        items={mainrouter.map(
          (item, index) => ({
            key: String(index + 1),
            icon: setIcon(item.icon),
            label: <NavLink to={item.path}>{item.title}</NavLink>,
          }),
        )}
      />
    </Sider>
    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
          <Outlet></Outlet>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>
);

export default App;